<template>
  <div class="search-list" v-loading="searchLoading">
    <searchTag v-for="(subject,idx) in movieList"  :subject="subject" :key="idx" :mid="idx"></searchTag>
    <div class="block" v-show="movieList.length > 10">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="movieList.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default{
  data () {
    return {
      currentPage: 0
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  },
  mounted () {
    if (this.searchText === '') {
      let searchText = this.$route.query.searchText
      this.$store.commit('SEARCH_TEXT', {searchText})
      this.$store.dispatch('searchMovieList')
    }
  },
  components: {
    'searchTag': (resolve) => {
      require(['./common/searchTag.vue'], resolve)
    }
  },
  computed: {
    searchText () {
      return this.$store.getters.searchText
    },
    movieList () {
      return this.$store.getters.movieList
    },
    searchLoading () {
      return this.$store.getters.searchLoading
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less">
.search-list{
  width: 950px;
  min-height: 500px;
  margin: 30px auto;
}
</style>
